<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 首页内容 -->
    <div class="NavBar">
      <span class="NavBar_item" @click="$router.push('/newsList')">
        <span style="background-color: #24e997">
          <van-icon name="newspaper-o" />
        </span>
        <p>新闻资讯</p>
      </span>
      <span class="NavBar_item" @click="$router.push('/imageList')">
        <span style="background-color: #fd3c4f">
          <van-icon name="photo" />
        </span>
        <p>图片分享</p>
      </span>
      <span class="NavBar_item" @click="$router.push('/shoppingList')">
        <span style="background-color: #3f80fe">
          <van-icon name="shopping-cart" />
        </span>
        <p>商品展示</p>
      </span>
      <span class="NavBar_item">
        <span style="background-color: #2bc2f7">
          <van-icon name="comment-circle" />
        </span>
        <p>留言反馈</p>
      </span>
      <span class="NavBar_item">
        <span style="background-color: #fd4000">
          <van-icon name="search" />
        </span>
        <p>搜索资讯</p>
      </span>
      <span class="NavBar_item">
        <span style="background-color: #fe772b">
          <van-icon name="phone-o" />
        </span>
        <p>联系我们</p>
      </span>
    </div>
    <!-- 底部 -->
    <!-- <TabBar></TabBar> -->
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
// import TabBar from '@/components/TabBar.vue'
import { GetLunBo } from "../apis/post";
export default {
  data() {
    return {
      images: [],
    };
  },
  async mounted() {
    let res = await GetLunBo();
    this.images = res.data.message;
    // console.log(res.data.message);
  },
  components: {
    Header,
    // TabBar
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;

  img {
    width: 100%;
    height: 260px;
  }
}
.van-swipe {
  height: 260px;
}
.NavBar {
  width: 100%;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
  .NavBar_item {
    height: 100%;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    span {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      line-height: 70px;
      text-align: center;
      font-size: 40px;
      color: #fff;
    }
  }
}
</style>